<template>
  <div class="home-aside" >
    <h3 class="aside" @click="isCollapse = !isCollapse">|||</h3>
    <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :collapse-transition="false"
      :unique-opened="true"
      background-color="#333744"
      text-color="#fff"
      :router="true"
      :style="{ width: asideWidth + 'px' }"
    >
      <el-submenu :index="menu.id + ''" v-for="menu in menus" :key="menu.id">
        <template slot="title">
          <i :class="'icon-' + menu.path" class="iconfont"></i>
          <span slot="title">{{ menu.authName }}</span>
        </template>
        <el-menu-item
          :index="'/home/' + list.path"
          v-for="list in menu.children"
          :key="list.id"
          @click="saveActivePath(`/home/${list.path}`)"
        >
          <i class="el-icon-menu"></i>
          <span slot="title"> {{ list.authName }} </span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, //是否展开
      asideWidth: 200, //边框
      menus: [], //左侧导航列表
      activePath: '1-1',
    }
  },
  watch: {
    isCollapse() {
      this.asideWidth = !this.isCollapse ? 200 : 64
    },
  },
  mounted() {
    //刷新保存状态
    this.activePath = sessionStorage.getItem('activePath')

    this.getMenus()
  },
  methods: {
    changeAsideWidth() {
      this.isCollapse = !this.isCollapse
    },
    async getMenus() {
      //获取导航列表
      const { data, meta } = await this.$axios.get('/api/menus')
      // console.log(data)

      if (meta.status == 200) {
        this.menus = data
      }
    },
    saveActivePath(path) {//防刷新
      sessionStorage.setItem('activePath', path)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    
  },
  beforeDestroy(){
    sessionStorage.setItem('activePath','')
  }
}
</script>
<style lang="less" scoped>
@import './home-aside.less';
</style>
